<html>
    <head>
        <title>如何触发 Action</title>
    </head>
    <body>
        <script>
              /*
                        三、触发 action

                                1、action 通过 store.dispatch 方法触发。

                                            !-- 页面路径：  pages/index/index.vue ---
                                            <template>
                                                <view>
                                                    <view> 数量： {{ count}}</view>
                                                    <button @click="add">增加</button>
                                                </view>
                                            </template>

                                            <script>
                                                import store from '@/store/index.js'
                                                export default{
                                                    computed:{
                                                        count(){
                                                            return this.$store.state.count
                                                        }
                                                    },
                                                    methods:{
                                                        add(){
                                                            store.dispatch('addCountAction')
                                                        }
                                                    }
                                                }
                                            <//script>


                                                ★、actions 支持以载荷形式触发：

                                                            // 页面路径 ： store/index.js

                                                            import Vue from 'vue'
                                                            import Vuex from 'vuex'

                                                            Vue.use(Vuex);

                                                            const store = new Vuex.Store({
                                                                state:{
                                                                    count:1
                                                                },
                                                                mutations:{
                                                                    add(state,payload){
                                                                        state.commit('add',patload)
                                                                    }
                                                                }
                                                            })

                                                            export default store;


                                                            // 页面路径：  pages/index/index.vue
                                                            <template>
                                                                <veiw>
                                                                    <view>数量： {{ count}}</view>
                                                                    <button @click="add">增加</button>
                                                                </view>
                                                            </template>
                                                            <script>
                                                                import store from '@/store/index.js'

                                                                export default{
                                                                    computed:{
                                                                        count(){
                                                                            return this.$store.state.count
                                                                        }
                                                                    },
                                                                    methods:{
                                                                        add(){
                                                                            // 以载荷方式触发
                                                                            store.dispatch('addCountAction',{amount:10})
                                                                        }
                                                                    }
                                                                }
                                                            <//script>


                                                        ★、actions 以对象方式触发

                                                                methods:{
                                                                        add(){
                                                                            // 以对象形式触发
                                                                            store.dispatch({
                                                                                type:'addCountAction',
                                                                                amount:5
                                                                            })
                                                                        }
                                                                }


                                                    ★、action 可以执行任意的同步和异步操作

                                                                我们可以在 action 内部执行异步操作：

                                                                // 页面路径：  store/index.js
                                                                import Vue from 'vue'
                                                                import Vuex from 'vuex'

                                                                Vue.use(Vuex);

                                                                const store = new Vuex.Store({
                                                                        state:{
                                                                            count:1
                                                                        },
                                                                        mutations:{
                                                                            add(state){
                                                                                // 变更状态
                                                                                state.count +=2
                                                                            }
                                                                        },
                                                                        actions:{
                                                                            addCountAction(context){
                                                                                // 再执行累加时，会等待两秒才执行
                                                                                setTimeout(function(){
                                                                                    context.commit('add')
                                                                                },2000)
                                                                            }
                                                                        }
                                                                })

                                                                export default store;


                                                        来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

                                                                actions:{
                                                                    checkout({commit,state},products){
                                                                        // 把当前购物车的物品备份起来
                                                                        const savedCartItems = [...state.cart.added]

                                                                        // 发出结账请求
                                                                        commit(types.CHECKOUT_REQUEST);

                                                                        // 购物 API接受一个成功回调和一个失败回调
                                                                        shop.buyProducts(
                                                                            products,
                                                                            // 成功操作
                                                                            () => commit(types.CHECKOUT_SUCCESS),
                                                                            // 失败操作
                                                                            () => commit(types.CHECKOUT_FAILURE, savedCartItems)
                                                                        )
                                                                    }
                                                                }

                                                        注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的状态变更。



                                2、mapActions 辅助函数

                                           <1>、 通过 mapActions 辅助函数触发 action

                                                        创建组件方法触犯action

                                                            ①、你在组件中使用 this.$store.dispatch('xxx') 触发 action

                                                            ②、或者使用 manActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先再根节点注入 store）

                                                        !-- 页面路径:  pages/index/index.vue --
                                                        <template>
                                                            <view>
                                                                <view>数量：{{ count }}</view>
                                                                <button @click="addCountAction">增加</button>
                                                            </view>
                                                        </template>
                                                        <script>
                                                            import { mapActions } from 'vuex'
                                                            export default{
                                                                computed:{
                                                                    count(){
                                                                        return this.$store.state.count
                                                                    }
                                                                },
                                                                methods:{
                                                                    ...mapActions([
                                                                        'addCountAction',
                                                                        // 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
                                                                    ])
                                                                }
                                                            }
                                                        <//script>

                                          <2>、mapActions 也支持传入参数 (载荷)：

                                                        methods:{
                                                            ...mapActions([
                                                                 'addCountAction' 
                                                                // 将 `this.addCountAction(amount)` 映射为 
                                                                //`this.$store.dispatch('addCountAction', amount)`
                                                            ])
                                                        }

                                          <3>、mapActions 也支持传递一个对象：

                                                       methods: {
                                                            ...mapActions({
                                                                addCount: 'addCountAction',
                                                                // 将 `this.addCount()` 映射为 `this.$store.dispatch('addCountAction')`
                                                            })
                                                        }
                    */
        </script>
    </body>
</html>